﻿
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="~/lib/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <table class="layui-hide" id="test"></table>
    <script src="~/lib/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->



    <script>


            layui.use('table', function () {
                var table = layui.table;

                table.render({
                    elem: '#test'
                    , url: '/api/liuyan/GetAll'
                    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

                    , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        , layEvent: 'LAYTABLE_TIPS'
                        , icon: 'layui-icon-tips'
                    }]
                    , title: '聊天记录表'
                    , cols: [[

                        { field: 'id', title: 'ID', sort: true }
                        , { field: 'ip', title: 'ip' }
                        , { field: 'ipweizhi', title: '位置' }
                        , { field: 'cid', title: '城市id' }
                        , { field: 'browser', title: '浏览器' }
                        , { field: 'logintime', title: '登录时间', sort: true}


                    ]]

                    //加分页功能
                    , page: true
                    , limits: [10, 20, 50]  //一页选择显示3,5或10条数据
                    , limit: 10  //一页显示10条数据
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                        var result;
                        console.log(this);
                        console.log(JSON.stringify(res));
                        if (this.page.curr) {
                            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                        }
                        else {
                            result = res.data.slice(0, this.limit);
                        }
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.count, //解析数据长度
                            "data": result //解析数据列表
                        };
                    }

                });
                //监听行工具事件
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        layer.prompt({
                            formType: 2
                            , value: data.lastName
                        }, function (value, index) {
                            obj.update({
                                email: value
                            });
                            layer.close(index);
                        });
                    }
                });
            });

    </script>



</body>
</html>